// webpack配置项
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development',//打包模式
    entry: './src/main.js',
    devServer:{//webpack开发服务器配置项
      port:3000,//端口号
      open:true
    },
    // 出口 
    output: {
        // __dirname: 当前文件所在文件夹的绝对路径
    path: path.resolve(__dirname, 'dist'),//输出到那个文件夹下
    filename: 'bundle.js',//输出文件名
  },
  plugins: [new HtmlWebpackPlugin({
    template: './public/index.html'//指定的html作为模板生成dist吓得html文件
  })],//插件
  module: {//加载器
    rules: [//规则
      {
        test: /\.css$/i,//正则匹配  .css结尾的文件（i忽略大小写）
        use: ["style-loader", "css-loader"],//使用两个加载器来解析css文件
        // 注意 ：加载器使用顺序，webpack会从右往左使用
        // css-loader :负责让webpack识别.cc文件，并把内容打包进bundle.js中
        // style-loader :负责js里的css代码插入到DOM中（head标签内style内）
      },
      {
        test: /\.less$/, // 匹配.less结尾文件
        // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
          use: [ "style-loader", "css-loader", 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
        type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        // webpack内置针对
        // 8kb以下的图片文件，webpack会把图片转换成base64字符串，打包进js文件中
        // 好处：可以减少网络请求的次数，请求一个js文件（既有代码也有图片的字符串数据）
        // 8kb一闪过的图片文件，webpack直接辅助到dist下并随机产生名字并替换到代码中使用新的地址
        // 原因：图片再转换成baes64字符串（会多增加20-30%空间），所以图片越大越得不偿失
      },
      { 
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        type: 'asset/resource',  // 当做静态资源直接复制文件
        generator: {
          filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
        }
      },
      {
        test: /\.js$/, // 匹配js结尾文件
        exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
        use: { 
            loader: 'babel-loader', // 使用加载器-处理
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
    ],
  },
};